<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.61">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/icon.png"><title>TS基础学习 | FYJ</title><meta name="description" content="Just playing around">
    <link rel="modulepreload" href="/assets/app-5e55c3a9.js"><link rel="modulepreload" href="/assets/framework-9675d465.js"><link rel="modulepreload" href="/assets/typescript.html-0bd71496.js"><link rel="modulepreload" href="/assets/typescript.html-3e2bf303.js"><link rel="prefetch" href="/assets/index.html-6d5e9dd3.js" as="script"><link rel="prefetch" href="/assets/index.html-3d8b60b2.js" as="script"><link rel="prefetch" href="/assets/index.html-a7cfb774.js" as="script"><link rel="prefetch" href="/assets/index.html-1a66ce3d.js" as="script"><link rel="prefetch" href="/assets/index.html-a2322c32.js" as="script"><link rel="prefetch" href="/assets/index.html-2b8e88d2.js" as="script"><link rel="prefetch" href="/assets/index.html-36817084.js" as="script"><link rel="prefetch" href="/assets/index.html-c05495db.js" as="script"><link rel="prefetch" href="/assets/index.html-3cf0f594.js" as="script"><link rel="prefetch" href="/assets/index.html-33a8693c.js" as="script"><link rel="prefetch" href="/assets/index.html-80880afd.js" as="script"><link rel="prefetch" href="/assets/index.html-df5b0273.js" as="script"><link rel="prefetch" href="/assets/index.html-d608509e.js" as="script"><link rel="prefetch" href="/assets/index.html-ac9bff28.js" as="script"><link rel="prefetch" href="/assets/index.html-d251d55d.js" as="script"><link rel="prefetch" href="/assets/index.html-d299a2c9.js" as="script"><link rel="prefetch" href="/assets/index.html-c8596e07.js" as="script"><link rel="prefetch" href="/assets/index.html-ce42ac51.js" as="script"><link rel="prefetch" href="/assets/index.html-e1e2c2da.js" as="script"><link rel="prefetch" href="/assets/index.html-49c6b4a8.js" as="script"><link rel="prefetch" href="/assets/index.html-3880c1f3.js" as="script"><link rel="prefetch" href="/assets/index.html-b5b12757.js" as="script"><link rel="prefetch" href="/assets/index.html-6cf06f14.js" as="script"><link rel="prefetch" href="/assets/index.html-1a88d37b.js" as="script"><link rel="prefetch" href="/assets/index.html-c8e98ed0.js" as="script"><link rel="prefetch" href="/assets/index.html-d7cf9c00.js" as="script"><link rel="prefetch" href="/assets/git.html-0da1c675.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-4654ddc1.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-54f235b4.js" as="script"><link rel="prefetch" href="/assets/DOM__BOM.html-b97d346f.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-a3fbc3f8.js" as="script"><link rel="prefetch" href="/assets/jsbiji2.html-6c330c31.js" as="script"><link rel="prefetch" href="/assets/RESTheAJAX.html-17e205d8.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-08b53360.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-3208ecf3.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-7baa2b76.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-ad7d95ea.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-31658686.js" as="script"><link rel="prefetch" href="/assets/express.html-042999ef.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-abaf3902.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-9408a820.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-8df1574a.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-72c9480b.js" as="script"><link rel="prefetch" href="/assets/promise.html-85e3fffc.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-a09bf01e.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-86d8c25d.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-86b29b9f.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-67d4835d.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-932412c5.js" as="script"><link rel="prefetch" href="/assets/vue-router3.html-09f47896.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-10c04317.js" as="script"><link rel="prefetch" href="/assets/vue2.html-82b6d2df.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-56d49820.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-3ffca1f7.js" as="script"><link rel="prefetch" href="/assets/Vuex3.html-e24f4da6.js" as="script"><link rel="prefetch" href="/assets/api.html-b73a9946.js" as="script"><link rel="prefetch" href="/assets/home.html-746a4c0d.js" as="script"><link rel="prefetch" href="/assets/plugin.html-6a7b36ed.js" as="script"><link rel="prefetch" href="/assets/theme.html-6037defd.js" as="script"><link rel="prefetch" href="/assets/121501.html-8973c891.js" as="script"><link rel="prefetch" href="/assets/404.html-60b35caa.js" as="script"><link rel="prefetch" href="/assets/index.html-101169bd.js" as="script"><link rel="prefetch" href="/assets/index.html-c05f203a.js" as="script"><link rel="prefetch" href="/assets/index.html-0c6bc7be.js" as="script"><link rel="prefetch" href="/assets/index.html-0fe42912.js" as="script"><link rel="prefetch" href="/assets/index.html-35698f58.js" as="script"><link rel="prefetch" href="/assets/index.html-a9998c9a.js" as="script"><link rel="prefetch" href="/assets/index.html-e03acce1.js" as="script"><link rel="prefetch" href="/assets/index.html-936bfd18.js" as="script"><link rel="prefetch" href="/assets/index.html-3b167d99.js" as="script"><link rel="prefetch" href="/assets/index.html-6a7e33f2.js" as="script"><link rel="prefetch" href="/assets/index.html-00dc6c81.js" as="script"><link rel="prefetch" href="/assets/index.html-c386c5b9.js" as="script"><link rel="prefetch" href="/assets/index.html-62cab89d.js" as="script"><link rel="prefetch" href="/assets/index.html-c6f54c68.js" as="script"><link rel="prefetch" href="/assets/index.html-5fc54677.js" as="script"><link rel="prefetch" href="/assets/index.html-96867bd4.js" as="script"><link rel="prefetch" href="/assets/index.html-452a2070.js" as="script"><link rel="prefetch" href="/assets/index.html-500c2666.js" as="script"><link rel="prefetch" href="/assets/index.html-d797d831.js" as="script"><link rel="prefetch" href="/assets/index.html-84073cb9.js" as="script"><link rel="prefetch" href="/assets/index.html-8dfee4a9.js" as="script"><link rel="prefetch" href="/assets/index.html-a675820e.js" as="script"><link rel="prefetch" href="/assets/index.html-948f048e.js" as="script"><link rel="prefetch" href="/assets/index.html-522daa8a.js" as="script"><link rel="prefetch" href="/assets/index.html-4d67ded2.js" as="script"><link rel="prefetch" href="/assets/index.html-8caf183d.js" as="script"><link rel="prefetch" href="/assets/git.html-9cef5060.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-cd096af4.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-4e591000.js" as="script"><link rel="prefetch" href="/assets/DOM__BOM.html-518d085e.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-f1c6b5c4.js" as="script"><link rel="prefetch" href="/assets/jsbiji2.html-0ce3d86b.js" as="script"><link rel="prefetch" href="/assets/RESTheAJAX.html-174a11fd.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-12f7f1aa.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-e15be5a7.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-993374db.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-06aa4d45.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-f6a2c1e1.js" as="script"><link rel="prefetch" href="/assets/express.html-c34de6a8.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-393ba2a3.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-84b55eda.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-2ee518f3.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-fabb53b0.js" as="script"><link rel="prefetch" href="/assets/promise.html-34216aec.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-aac8da2d.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-1540a73e.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-d4dece61.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-2cfeca4a.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-4c95566c.js" as="script"><link rel="prefetch" href="/assets/vue-router3.html-fa748c7b.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-b4107b02.js" as="script"><link rel="prefetch" href="/assets/vue2.html-dfda70b7.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-4cf781c8.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-a5f191aa.js" as="script"><link rel="prefetch" href="/assets/Vuex3.html-68ef32c1.js" as="script"><link rel="prefetch" href="/assets/api.html-710c8c92.js" as="script"><link rel="prefetch" href="/assets/home.html-b45de374.js" as="script"><link rel="prefetch" href="/assets/plugin.html-2075a048.js" as="script"><link rel="prefetch" href="/assets/theme.html-5b5f0e80.js" as="script"><link rel="prefetch" href="/assets/121501.html-865346dc.js" as="script"><link rel="prefetch" href="/assets/404.html-eab7b035.js" as="script"><link rel="prefetch" href="/assets/reco-valine-a0c1af1f.js" as="script">
    <link rel="preload" href="/assets/style-887583e0.css" as="style"><link rel="stylesheet" href="/assets/style-887583e0.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper series--no show-catalog"><div><header class="navbar-container"><!--[--><div class="site-brand nav-item"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><div class="nav-item navbar-links-wrapper" style=""><div><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div><nav class="navbar-links"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><span class="xicon-container btn-toggle-dark-mode btn--dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span><span class="xicon-container btn-toggle-menus"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><circle cx="16" cy="8" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="24" r="2" fill="currentColor"></circle></svg></span></div><!--]--></header><div class="mobile-menus-container"><nav class="navbar-links mobile"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><div class="appearance"><span>Appearance</span><span class="xicon-container btn-toggle-dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span></div></div><div class="series-mask"></div><aside class="series-container"><div class="site-brand"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><!--[--><!--]--></aside><!--[--><main class="page-container"><h1 class="page-title">TS基础学习</h1><div class="page-info"><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M16 4a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7z" fill="currentColor"></path><path d="M26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->fyj<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2023/06/03<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->ts-note<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M10 14a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm0-6a2 2 0 1 0 1.998 2.004A2.002 2.002 0 0 0 10 8z" fill="currentColor"></path><path d="M16.644 29.415L2.586 15.354A2 2 0 0 1 2 13.941V4a2 2 0 0 1 2-2h9.941a2 2 0 0 1 1.414.586l14.06 14.058a2 2 0 0 1 0 2.828l-9.943 9.943a2 2 0 0 1-2.829 0zM4 4v9.942L18.058 28L28 18.058L13.942 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Typescript<!--]--></span></span><!----></div><div class="theme-reco-default-content"><div><p>学习 <a href="https://vue3.chengpeiquan.com/" target="_blank" rel="noopener noreferrer">《前端工程化：基于 Vue.js 3.0 的设计与实践》<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 这本书的笔记</p><h2 id="_1-hello-typescript" tabindex="-1"><a class="header-anchor" href="#_1-hello-typescript" aria-hidden="true">#</a> 1.Hello TypeScript</h2><blockquote><p>TypeScript简称TS，是Javascript的超集，也就是在js上增加了一套类型系统。<a href="http://ts.xcatliu.com/introduction/what-is-typescript.html#typescript-%E7%9A%84%E7%89%B9%E6%80%A7" target="_blank" rel="noopener noreferrer">什么是TS<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></blockquote><h3 id="_1-1安装依赖包" tabindex="-1"><a class="header-anchor" href="#_1-1安装依赖包" aria-hidden="true">#</a> 1.1安装依赖包</h3><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-D</span> typescript ts-node
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ul><li>typescript：TypeScript 的语言依赖包</li><li>ts-node：让 Node 可以运行 TypeScript 的执行环境</li></ul><h2 id="_2-原始数据类型" tabindex="-1"><a class="header-anchor" href="#_2-原始数据类型" aria-hidden="true">#</a> 2.原始数据类型</h2><table><thead><tr><th>原始数据类型</th><th>JavaScript</th><th>TypeScript</th></tr></thead><tbody><tr><td>字符串</td><td>String</td><td>string</td></tr><tr><td>数值</td><td>Number</td><td>number</td></tr><tr><td>布尔值</td><td>Boolean</td><td>boolean</td></tr><tr><td>大整数</td><td>BigInt</td><td>bigint</td></tr><tr><td>符号</td><td>Symbol</td><td>symbol</td></tr><tr><td>不存在</td><td>Null</td><td>null</td></tr><tr><td>未定义</td><td>Undefined</td><td>undefined</td></tr></tbody></table><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 字符串</span>
<span class="token keyword">const</span> str<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">=</span> <span class="token string">&quot;今天天气真不错&quot;</span>
<span class="token comment">// 数值</span>
<span class="token keyword">const</span> num<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token number">12</span>
<span class="token comment">// 布尔值</span>
<span class="token keyword">const</span> bool<span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token operator">=</span> <span class="token boolean">true</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>原始数据类型的类型定义是可以省略的，因为 TypeScript 会根据声明变量时赋值的类型，自动推导变量类型。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">const</span> str2 <span class="token operator">=</span> <span class="token string">&quot;今天天气真不错&quot;</span>
<span class="token keyword">const</span> num2 <span class="token operator">=</span> <span class="token number">12</span>
<span class="token keyword">const</span> bool2 <span class="token operator">=</span> <span class="token boolean">true</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-数组" tabindex="-1"><a class="header-anchor" href="#_3-数组" aria-hidden="true">#</a> 3.数组</h2><table><thead><tr><th>数组里的数据</th><th>类型写法 1</th><th>类型写法 2</th></tr></thead><tbody><tr><td>字符串</td><td>string[]</td><td>Array&lt; string &gt;</td></tr><tr><td>数值</td><td>number[]</td><td>Array&lt; number &gt;</td></tr><tr><td>布尔值</td><td>boolean[]</td><td>Array&lt; boolean &gt;</td></tr><tr><td>大整数</td><td>bigint[]</td><td>Array&lt; bigint &gt;</td></tr><tr><td>符号</td><td>symbol[]</td><td>Array&lt; symbol &gt;</td></tr><tr><td>不存在</td><td>null[]</td><td>Array&lt; null &gt;</td></tr><tr><td>未定义</td><td>undefined[]</td><td>Array&lt; undefined &gt;</td></tr></tbody></table><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 字符串数组</span>
<span class="token keyword">const</span> strArr<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;今&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;天&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;气&quot;</span><span class="token punctuation">]</span>
<span class="token comment">// 数值数组</span>
<span class="token keyword">const</span> numArr<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token comment">// 布尔值数组</span>
<span class="token keyword">const</span> boolArr<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>数组也可以省略，如果的数组一开始就有初始数据（数组长度不为 0 ），那么 TypeScript 也会根据数组里面的项目类型，正确自动帮推导这个数组的类型。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">const</span> strArr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;今&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;天&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;气&quot;</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> numArr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> boolArr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果一开始就是[]，那么就必须要指定数组类型。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 这个时候会认为是 any[] 或者 never[] 类型</span>
<span class="token keyword">const</span> numArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token comment">// 这个时候再 push 一个 number 数据进去，也不会使其成为 number[]</span>
nums<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-对象-接口" tabindex="-1"><a class="header-anchor" href="#_4-对象-接口" aria-hidden="true">#</a> 4.对象（接口）</h2><p>对象的类型定义：</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// type UserItem = {}</span>
<span class="token keyword">interface</span> <span class="token class-name">UserItem</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_4-1接口使用" tabindex="-1"><a class="header-anchor" href="#_4-1接口使用" aria-hidden="true">#</a> 4.1接口使用</h3><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">interface</span> <span class="token class-name">UserItem</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
    <span class="token keyword">const</span> petter <span class="token operator">=</span> <span class="token punctuation">{</span>
        name<span class="token operator">:</span> <span class="token string">&quot;Petter&quot;</span><span class="token punctuation">,</span>
        age<span class="token operator">:</span> <span class="token number">18</span>
    <span class="token punctuation">}</span>
 
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>###4.2 接口的可选属性</p><p>TS中可以使用<code>?</code>代表属性是否是必要的</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">interface</span> <span class="token class-name">UserItem</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
    <span class="token comment">// 可选属性</span>
    age<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_4-3调用接口自身的属性" tabindex="-1"><a class="header-anchor" href="#_4-3调用接口自身的属性" aria-hidden="true">#</a> 4.3调用接口自身的属性</h3><p>接口属性类型如果跟接口本身类型一致，是可以直接引用的。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">interface</span> <span class="token class-name">UserItem</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
    enjoyFoods<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token comment">// 引用了本身类型</span>
    friendList<span class="token operator">:</span> UserItem<span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token comment">// 将此变量关联到用户对象上</span>
<span class="token keyword">const</span> petter<span class="token operator">:</span> UserItem <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Petter&quot;</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
    enjoyFoods<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;rice&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;orange&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;bread&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    friendList<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">&quot;Tom&quot;</span><span class="token punctuation">,</span>
            age<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
            enjoyFoods<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;bread&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;cake&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            friendList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_4-4接口的继承" tabindex="-1"><a class="header-anchor" href="#_4-4接口的继承" aria-hidden="true">#</a> 4.4接口的继承</h3><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 接口继承  也就是继承上面代码块里的UserItem</span>
<span class="token keyword">interface</span> <span class="token class-name">Admin</span> <span class="token keyword">extends</span> <span class="token class-name">UserItem</span> <span class="token punctuation">{</span>
    permissionLevel<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> admin<span class="token operator">:</span> Admin <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Petter&quot;</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
    enjoyFoods<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;rice&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;orange&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;bread&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    friendList<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">&quot;Tom&quot;</span><span class="token punctuation">,</span>
            age<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
            enjoyFoods<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;bread&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;cake&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            friendList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">&quot;Joy&quot;</span><span class="token punctuation">,</span>
            age<span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span>
            enjoyFoods<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;apple&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;bread&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;cake&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            friendList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    permissionLevel<span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当然可能一些属性是不需要的，也可以将这些属性省略。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">interface</span> <span class="token class-name">UserItem</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
    enjoyFoods<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    friendList<span class="token operator">:</span> UserItem<span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token comment">// Admin2 继承 UserItem 省略了enjoyFoods  friendList 属性   多个属性用 | 分开</span>
<span class="token keyword">interface</span> <span class="token class-name">Admin</span> <span class="token keyword">extends</span> <span class="token class-name">Omit<span class="token operator">&lt;</span>UserItem<span class="token punctuation">,</span> <span class="token string">&#39;enjoyFoods&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;friendList&#39;</span><span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
    permissionLevel<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> admin<span class="token operator">:</span> Admin <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Jerry&quot;</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span> <span class="token number">28</span><span class="token punctuation">,</span>
    permissionLevel<span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_5-类" tabindex="-1"><a class="header-anchor" href="#_5-类" aria-hidden="true">#</a> 5.类</h2><h3 id="_5-1定义一个类" tabindex="-1"><a class="header-anchor" href="#_5-1定义一个类" aria-hidden="true">#</a> 5.1定义一个类</h3><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
    <span class="token comment">// constructor 上的数据需要先这样定好类型</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span>username<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> username
    <span class="token punctuation">}</span>
    <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// 通过 new 这个类型得到的变量，它的类型就是这个类</span>
<span class="token keyword">const</span> baki<span class="token operator">:</span> User <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token string">&quot;Baki&quot;</span><span class="token punctuation">)</span>
baki<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// Baki</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_5-2类与类之间的继承" tabindex="-1"><a class="header-anchor" href="#_5-2类与类之间的继承" aria-hidden="true">#</a> 5.2类与类之间的继承</h3><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 这是一个基础类</span>
<span class="token keyword">class</span> <span class="token class-name">UserBase</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span>username<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> username
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// 这个类继承自UserBase（基础类）</span>
<span class="token keyword">class</span> <span class="token class-name">User2</span> <span class="token keyword">extends</span> <span class="token class-name">UserBase</span> <span class="token punctuation">{</span>
    <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> haman<span class="token operator">:</span> User2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">User2</span><span class="token punctuation">(</span><span class="token string">&quot;Hanma&quot;</span><span class="token punctuation">)</span>
haman<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// Hanma</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_5-3类也可以提供给接口去继承" tabindex="-1"><a class="header-anchor" href="#_5-3类也可以提供给接口去继承" aria-hidden="true">#</a> 5.3类也可以提供给接口去继承</h3><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">class</span> <span class="token class-name">UserBase2</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span>username<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> username
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">User3</span> <span class="token keyword">extends</span> <span class="token class-name">UserBase2</span> <span class="token punctuation">{</span>
    age<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> huashan<span class="token operator">:</span> User3 <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;HuaShan&quot;</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span> <span class="token number">18</span>
<span class="token punctuation">}</span> 
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果类上面本身有方法存在，接口在继承的时候也要相应的实现，当然使用Omit去省略这些方法。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">class</span> <span class="token class-name">UserBase2</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span>username<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> username
    <span class="token punctuation">}</span>
    <span class="token comment">// 这是一个方法</span>
    <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">User3</span> <span class="token keyword">extends</span> <span class="token class-name">Omit<span class="token operator">&lt;</span>UserBase2<span class="token punctuation">,</span> <span class="token string">&#39;getName&#39;</span><span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
    age<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> huashan<span class="token operator">:</span> User3 <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;HuaShan&quot;</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_6-函数" tabindex="-1"><a class="header-anchor" href="#_6-函数" aria-hidden="true">#</a> 6.函数</h2><h3 id="_6-1函数的基本写法" tabindex="-1"><a class="header-anchor" href="#_6-1函数的基本写法" aria-hidden="true">#</a> 6.1函数的基本写法</h3><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 函数的入参把类型写在参数后面，返回值是写在圆括号后面。</span>
<span class="token keyword">function</span> <span class="token function">sum1</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> x <span class="token operator">+</span> y
<span class="token punctuation">}</span>
<span class="token keyword">const</span> <span class="token function-variable function">sum2</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> x <span class="token operator">+</span> y
<span class="token punctuation">}</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum1</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum2</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_6-2函数的可选参数" tabindex="-1"><a class="header-anchor" href="#_6-2函数的可选参数" aria-hidden="true">#</a> 6.2函数的可选参数</h3><p>可以在入参后面加上<code>?</code></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> isDouble<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> isDouble <span class="token operator">?</span> <span class="token punctuation">(</span>x <span class="token operator">+</span> y<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">2</span> <span class="token operator">:</span> x <span class="token operator">+</span> y
<span class="token punctuation">}</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8h.01"></path><path d="M11 12h1v4h1"></path></g></svg><p class="custom-container-title">TIP</p><p>可选参数必须排在必传参数的后面</p></div><h3 id="_6-3无返回值的函数" tabindex="-1"><a class="header-anchor" href="#_6-3无返回值的函数" aria-hidden="true">#</a> 6.3无返回值的函数</h3><p>函数不需要返回值时，使用<code>void</code>来定义它的返回</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 注意这里的返回值类型</span>
<span class="token keyword">function</span> <span class="token function">sayHi</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi,</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token string">&quot;jake&quot;</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>但是需要注意的是void和null、undefined不可以混用，如果返回值类型是null，是要<strong>return null</strong> 的</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">sayHi2</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">null</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi,</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span>
<span class="token function">sayHi2</span><span class="token punctuation">(</span><span class="token string">&quot;baki&quot;</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>判断参数不合法时，可以提前终止执行，这时可以使用void</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">sayHi</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>name<span class="token punctuation">)</span> <span class="token keyword">return</span>
  <span class="token comment">// 否则正常运行</span>
  <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_6-4异步函数返回值" tabindex="-1"><a class="header-anchor" href="#_6-4异步函数返回值" aria-hidden="true">#</a> 6.4异步函数返回值</h3><p>异步函数，需要使用Promise&lt; T &gt; 类型定义它的返回值，T为泛型，取决于的函数最终返回一个什么样的值（ <code>async / await</code> 也适用这个类型）。</p><p>此段代码规定了Promise返回值类型为string，也就是Promise&lt; string &gt;，没有返回值就是Promise&lt; void &gt;</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">queryData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name"><span class="token builtin">Promise</span></span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">&quot;Hello World&quot;</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">queryData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_6-5函数本身的类型" tabindex="-1"><a class="header-anchor" href="#_6-5函数本身的类型" aria-hidden="true">#</a> 6.5函数本身的类型</h3><p>下面这段代码其实只定义了函数类型，并没有定义sum这个变量类型。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 这里的 sum ，确实是没有指定类型</span>
<span class="token keyword">const</span> sum <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">=&gt;</span> x <span class="token operator">+</span> y
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>也是在因为TS的自动推导，在原始数据类型中有提到，所以可以省略定义。</p><p>如果需要指定类型：</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">const</span> <span class="token function-variable function">sum</span><span class="token operator">:</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span><span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token operator">:</span><span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span><span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">=&gt;</span> x <span class="token operator">+</span> y
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>两个<code>=&gt;</code>第一个是TS的，第二个是JavaScript ES6的。</p><p>上面代码可以分成三块：</p><ol><li>const sum:(x:number, y:number) =&gt; number 函数的名称和类型</li><li>= (x: number, y:number) 这里是函数的形参和类型</li><li>: number =&gt; x + y 函数的返回值和类型</li></ol><p>TS函数 () =&gt; void ：</p><ol><li>()写入形参以及形参类型</li><li>=&gt; void 返回值以及返回值类型</li></ol><p>由于 TypeScript 会推导函数类型，所以很少会显式的去写出来，除非在给对象定义方法：</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 对象的接口</span>
<span class="token keyword">interface</span> <span class="token class-name">Obj</span> <span class="token punctuation">{</span>
  <span class="token comment">// 上面的方法就需要显式的定义出来</span>
  <span class="token function-variable function">sum</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
  <span class="token comment">// 也可以这么写</span>
  <span class="token function">sum2</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>
<span class="token comment">// 声明一个对象</span>
<span class="token keyword">const</span> obj<span class="token operator">:</span> Obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">sum</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> x <span class="token operator">+</span> y
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_6-6函数的重载" tabindex="-1"><a class="header-anchor" href="#_6-6函数的重载" aria-hidden="true">#</a> 6.6函数的重载</h3><p><strong>联合类型</strong></p><p>当一个变量可能出现多种类型的值的时候，可以使用联合类型来定义它，类型之间用 <code>|</code> 符号分隔。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">counter</span><span class="token punctuation">(</span>count<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">The current count is: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 不论传数值还是字符串，都可以达到的目的</span>
<span class="token function">counter</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>  <span class="token comment">// The current count is: 1.</span>
<span class="token function">counter</span><span class="token punctuation">(</span><span class="token string">&#39;2&#39;</span><span class="token punctuation">)</span>  <span class="token comment">// The current count is: 2.</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>重载</strong></p><p>开发可能会遇到一个API有多个类型的情况。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">greet</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token builtin">Array</span><span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> name<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Welcome,</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>n<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Welcome, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
<span class="token comment">// 单个问候</span>
<span class="token keyword">const</span> greeting <span class="token operator">=</span> <span class="token function">greet</span><span class="token punctuation">(</span><span class="token string">&quot;Bake&quot;</span><span class="token punctuation">)</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>greeting<span class="token punctuation">)</span>
<span class="token comment">// 多次问候</span>
<span class="token keyword">const</span> greetings <span class="token operator">=</span> <span class="token function">greet</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&quot;Jake&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Jerry&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Tom&quot;</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>greetings<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>虽然区分了形参的数组类型和字符串类型，但是在入参和返回值这里，显得非常乱。</p><p>再看看使用函数重载之后的代码。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">greet</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span>
<span class="token keyword">function</span> <span class="token function">greet</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">function</span> <span class="token function">greet</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token builtin">Array</span><span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> name<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Welcome,</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>n<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Welcome, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> greeting <span class="token operator">=</span> <span class="token function">greet</span><span class="token punctuation">(</span><span class="token string">&quot;你好&quot;</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> greetings <span class="token operator">=</span> <span class="token function">greet</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&quot;Jake&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Jerry&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Tom&quot;</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>第一行确定函数形参类型为string时，返回值为string；</li><li>第二行确定函数形参类型为string[]，返回值为string[]；</li><li>第三行才是函数体，这里的形参需要把涉及到的类型都写出来，用以匹配前两行的类型。在这种情况下，函数类型可以省略，因为1、2两行已经定义过返回值类型了。</li></ul><h2 id="_7-任意值-any" tabindex="-1"><a class="header-anchor" href="#_7-任意值-any" aria-hidden="true">#</a> 7.任意值（any）</h2><p>下面来看这段代码：</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 这段代码在 TS 里运行会报错</span>
<span class="token keyword">function</span> <span class="token function">getFirstWord</span><span class="token punctuation">(</span>msg<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&#39; &#39;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">getFirstWord</span><span class="token punctuation">(</span><span class="token string">&#39;Hello World&#39;</span><span class="token punctuation">)</span>
<span class="token function">getFirstWord</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这里会报错&quot;Parameter &#39;msg&#39; implicitly has an &#39;any&#39; type&quot; 参数msg带有隐式any类型。这里的any就是任意值</p><p>将<code>隐式</code>改为<code>显示</code>就行了：</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">getFirstWord</span><span class="token punctuation">(</span>msg<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">String</span><span class="token punctuation">(</span>msg<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&#39; &#39;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">getFirstWord</span><span class="token punctuation">(</span><span class="token string">&#39;Hello World&#39;</span><span class="token punctuation">)</span>
<span class="token function">getFirstWord</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_8-npm包" tabindex="-1"><a class="header-anchor" href="#_8-npm包" aria-hidden="true">#</a> 8.npm包</h2><p>由于一些包早期是由编写JavaScript，作者没有进行维护更新，所以缺少相应的TS类型，会导致报错。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">import</span> md5 <span class="token keyword">from</span> <span class="token string">&quot;md5&quot;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">md5</span><span class="token punctuation">(</span><span class="token string">&quot;Hello World&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>&quot; Could not find a declaration file for module &#39;md5&#39;&quot;</p><p>因此开源社区推出了一套 @types 类型包，专门处理这样的情况。</p><p>@types 类型包的命名格式为 <code>@types/&lt;package-name&gt;</code>，也就是在原有的包名前面拼接 <code>@types</code> ，日常开发要用到的知名 npm 包都会有相应的类型包，只需要将其安装到 package.json 的 <code>devDependencies</code> 里即可解决该问题。</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @types/md5
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="_9-类型断言" tabindex="-1"><a class="header-anchor" href="#_9-类型断言" aria-hidden="true">#</a> 9.类型断言</h2><p>使用类型断言的场景：</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">greet</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token builtin">Array</span><span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> name<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Welcome,</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>n<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Welcome, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
<span class="token comment">// 虽然已知此时应该是 string[]，但 TS 还是会以为这是string | string []</span>
<span class="token comment">// const greetings = greet([&quot;Baki&quot;,&quot;Jake&quot;,&quot;Jimmy&quot;])</span>
<span class="token comment">// 会导致无法使用join方法</span>
<span class="token comment">// console.log(greetings.join(&quot; &quot;))</span>

<span class="token comment">// 所以这时需要借助类型断言来解决这个问题</span>
<span class="token keyword">const</span> greetings <span class="token operator">=</span> <span class="token function">greet</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&quot;Baki&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;Jake&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;Jimmy&quot;</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token comment">// 另外一种写法</span>
<span class="token comment">// const greetings = &lt;string[]&gt; greet([&quot;Baki&quot;,&quot;Jake&quot;,&quot;Jimmy&quot;])  </span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>greetings<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot; &quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意事项：</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 原本要求 age 也是必须的属性之一</span>
<span class="token keyword">interface</span> <span class="token class-name">User5</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span>
    age<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>
<span class="token comment">// 但是类型断言过程中，遗漏了</span>
<span class="token keyword">const</span> petter2 <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token keyword">as</span> User5
petter2<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&#39;Petter&#39;</span>
<span class="token comment">// TypeScript 依然可以运行下去，但实际上的数据是不完整的</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>petter2<span class="token punctuation">)</span>  <span class="token comment">// { name: &#39;Petter&#39; }</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用类型断言可以让 TypeScript 不检查的代码，它会认为是对的。所以，要确保代码的正确性后再使用。</p><h2 id="_10-类型推论" tabindex="-1"><a class="header-anchor" href="#_10-类型推论" aria-hidden="true">#</a> 10.类型推论</h2><p>TS在声明变量时，可以推导出变量的类型。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">let</span> msg <span class="token operator">=</span> <span class="token string">&quot;你好&quot;</span>
<span class="token comment">// 会报错</span>
msg <span class="token operator">=</span> <span class="token number">1</span> <span class="token comment">// Type &#39;number&#39; is not assignable to type &#39;string&#39;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>类型推论的前提是变量在声明时有明确的值，如果一开始没有赋值，那么会被默认为 <code>any</code> 类型。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">let</span> product

product <span class="token operator">=</span> <span class="token string">&quot;name&quot;</span> <span class="token comment">// name</span>
product <span class="token operator">=</span> <span class="token number">10</span> <span class="token comment">// 10</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_11-如何编译为javascript代码" tabindex="-1"><a class="header-anchor" href="#_11-如何编译为javascript代码" aria-hidden="true">#</a> 11.如何编译为JavaScript代码</h2><p>在 package.json 里增加一个 build script ：</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">&quot;dev:ts&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ts-node src/ts/index.ts&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;tsc src/ts/index.ts --outDir dist&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>这样在命令行运行 <code>npm run build</code> 的时候，就会把 <code>src/ts/index.ts</code> 这个 TS 文件编译，并输出到项目下与 src 文件夹同级的 dist 目录下。</li><li>其中 <code>tsc</code> 是 TypeScript 用来编译文件的命令， <code>--outDir</code> 是它的一个选项，用来指定输出目录，如果不指定，则默认生成到源文件所在的目录下面。</li><li>在这个命令中，文件路径的开头没有 <code>/</code> 或盘符，这意味着它是相对于当前工作目录的相对路径。也就是说，这个命令假设当前工作目录是项目根目录，<code>src/ts/index.ts</code> 是相对于项目根目录的路径。</li></ul><p><a href="https://vue3.chengpeiquan.com/typescript.html#%E5%A6%82%E4%BD%95%E7%BC%96%E8%AF%91%E4%B8%BA-javascript-%E4%BB%A3%E7%A0%81" target="_blank" rel="noopener noreferrer">详情查看原文<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></div></div><footer class="page-meta"><div class="meta-item edit-link"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M2 26h28v2H2z" fill="currentColor"></path><path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Edit this page<!--]--></span></span></div><div class="meta-item last-updated"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Last Updated 2023/6/11 11:16:26<!--]--></span></span></div></footer><!----><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">ON THIS PAGE</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/ts-note/typescript.html#_1-hello-typescript" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.Hello TypeScript"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.Hello TypeScript<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_1-1安装依赖包" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.1安装依赖包"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.1安装依赖包<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/ts-note/typescript.html#_2-原始数据类型" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.原始数据类型"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.原始数据类型<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/ts-note/typescript.html#_3-数组" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.数组"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.数组<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/ts-note/typescript.html#_4-对象-接口" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="4.对象（接口）"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->4.对象（接口）<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_4-1接口使用" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="4.1接口使用"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->4.1接口使用<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_4-3调用接口自身的属性" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="4.3调用接口自身的属性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->4.3调用接口自身的属性<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_4-4接口的继承" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="4.4接口的继承"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->4.4接口的继承<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/ts-note/typescript.html#_5-类" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="5.类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->5.类<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_5-1定义一个类" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="5.1定义一个类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->5.1定义一个类<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_5-2类与类之间的继承" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="5.2类与类之间的继承"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->5.2类与类之间的继承<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_5-3类也可以提供给接口去继承" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="5.3类也可以提供给接口去继承"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->5.3类也可以提供给接口去继承<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/ts-note/typescript.html#_6-函数" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="6.函数"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->6.函数<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_6-1函数的基本写法" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="6.1函数的基本写法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->6.1函数的基本写法<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_6-2函数的可选参数" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="6.2函数的可选参数"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->6.2函数的可选参数<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_6-3无返回值的函数" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="6.3无返回值的函数"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->6.3无返回值的函数<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_6-4异步函数返回值" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="6.4异步函数返回值"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->6.4异步函数返回值<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_6-5函数本身的类型" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="6.5函数本身的类型"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->6.5函数本身的类型<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/ts-note/typescript.html#_6-6函数的重载" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="6.6函数的重载"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->6.6函数的重载<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/ts-note/typescript.html#_7-任意值-any" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="7.任意值（any）"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->7.任意值（any）<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/ts-note/typescript.html#_8-npm包" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="8.npm包"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->8.npm包<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/ts-note/typescript.html#_9-类型断言" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="9.类型断言"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->9.类型断言<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/ts-note/typescript.html#_10-类型推论" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="10.类型推论"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->10.类型推论<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/ts-note/typescript.html#_11-如何编译为javascript代码" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="11.如何编译为JavaScript代码"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->11.如何编译为JavaScript代码<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/assets/app-5e55c3a9.js" defer></script>
  </body>
</html>
